// 入职人数
import {Ref} from "vue";
import useVisualStore from "@/store/visualizationModule";
import * as echarts from "echarts";
import {callbackType} from "@/views/VisualizationSystem/LeftColumn/types";

export const initInductionPanel = (inductionPanelRef: Ref<HTMLElement>) => {
    const visualStore = useVisualStore()
    const memberInductionData = visualStore.memberInductionData
    // 实例化对象
    let myChart = echarts.init(inductionPanelRef.value);
    // 指定配置和数据
    let option: any = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: memberInductionData.month,
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisLabel: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                        // width: 1,
                        // types.ts: "solid"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "入职人数",
                type: "bar",
                barWidth: "35%",
                data: memberInductionData.count,
                itemStyle: {
                    borderRadius: 5
                }
            }
        ]
    };
    // 把配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
    return function (fn: callbackType) {
        fn(myChart, option)
    }
}

export const initSalaryRangePanel = (salaryRangePanelRef: Ref<HTMLElement>) => {
    // 基于准备好的dom，初始化echarts实例
    const visualStore = useVisualStore()
    let myChart = echarts.init(salaryRangePanelRef.value as HTMLElement);

    let option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p: any) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            data: visualStore.salaryRangeData.label,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {
                name: "薪资分布",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: [
                    "#065aab",
                    "#066eab",
                    "#0682ab",
                    "#0696ab",
                    "#06a0ab",
                    "#06b4ab",
                    "#06c8ab",
                    "#06dcab",
                    "#06f0ab"
                ],
                label: {show: false},
                labelLine: {show: false},
                data: visualStore.salaryRangeData.realData
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}